<template>
  <div class="view-community w100 h100">
    <div class="label">
      <img src="../../../../../static/image/system/community.png" alt="">
      <div class="name">场所预览</div>
    </div>
    <div class="map w100 h100">
      <div id="map" class=" w100 h100"></div>
      <div class="community-pannel">
        <community-box :community-form="communityForm" :is-view="true"
                       @hide="hideDialog"></community-box>
      </div>
    </div>
  </div>
</template>

<script>
  // import { regionDataPlus } from 'element-china-area-data'
  import { regionDataPlus } from 'static/js/regionData'
  import BMap from 'BMap'
  import CommunityBox from './CommunityBox'
  import Config from '../../../../config'
  export default {
    name: 'ViewCommunity',
    components: {
      CommunityBox
    },
    data () {
      return {
        map: null,
        communityForm: {
          areaName: '',
          communityName: '',
          position: '',
          // dfdf
          devtype: 'nbiot',
          devname: 'fireplug',
          site_name: '环普腾飞科汇城',
          site_serialno: 'id',
          country: '86',
          province: '610000',
          city: '610100',
          district: '610113',
          street: '鱼化寨',
          community: '环普腾飞科汇城',
          address: '天谷七路88号',
          gps_lon: '108.12345',
          gps_lat: '34.12345',
          site_phone: '',
          site_status: 'normal'
        }
      }
    },
    mounted () {
      this.initMap()
      this.getCommunityById()
    },
    methods: {
      initMap () {
        if (this.map) {
          return
        }
        this.map = new BMap.Map("map", {enableMapClick:false});    // 创建Map实例
        const point = new BMap.Point(114, 34)
        this.map.centerAndZoom(point, 15);      // 初始化地图,用城市名设置地图中心点
        this.map.enableScrollWheelZoom(true)
      },
      /**
       * 根据id获取场所信息
       * */
      getCommunityById () {
        const url = `${Config.DEVICE_MANAGE_URL}/final_equipsite/query`
        const query = this.$route.params.id.split('-') // [site_serialno, district]
        console.log(query)
        const param = {
          page: 0,
          size: 1,
          site_serialno: query[0],
          district: query[1]
        }
        this.$http.get(url, param)
          .then(data => {
            const list = data.array
            if (list.length === 0) {
              this.$message.warning('查询到的结果为0')
              return
            }
            this.communityForm = null
            this.communityForm = list[0]
            this.handleData()
          })
      },
      /**
       * 对数据进行预处理
       * */
      handleData () {
        const form = this.communityForm
        const province = this.getAreaObj(regionDataPlus, form.province)
        const city = this.getAreaObj(province.children, form.city)
        const district = this.getAreaObj(city.children, form.district)
        this.communityForm.areaName = `${province.label}${city.label}${district.label}`
        this.communityForm.communityName = form.site_name
        this.communityForm.position = `${parseInt(form.gps_lon)}，${parseInt(form.gps_lat)}`
        // const bd90Point = this.$util.Coordinate.getWGS84toBD09({lat: form.gps_lat, lng: form.gps_lon})
        const bd90Point = {lat: form.gps_lat, lng: form.gps_lon}
        this.addMarker(bd90Point)
      },
      /**
       * 添加marker
       * */
      addMarker (bd90Point) {
        this.map.clearOverlays()
        console.log(bd90Point)
        const point = new BMap.Point(bd90Point.lng, bd90Point.lat)
        const marker = new BMap.Marker(point)
        this.map.addOverlay(marker)
        this.map.centerAndZoom(point, 15)
      },
      /**
       * 获取区域信息
       * @param {Array} value
       * @return {Object} obj
       * */
      getAreaObj (arr, value) {
        let obj = null
        arr.some(item => {
          if (value === item.value) {
            obj = item
            return true
          }
        })
        return obj
      },
      /**
       * 关掉dialog
       * */
      hideDialog () {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .view-community {
    box-sizing: border-box;
    padding: 0 12px 12px 12px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .label {
      height: 44px;
      display: flex;
      align-items: center;
      img {
        height: 20px;
        margin-right: 8px;
      }
      .name {
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }
    }
    .map {
      flex: 1;
      position: relative;
      .map {
        width: 100%;
        height: 100%;
      }
      .community-pannel {
        position: absolute;
        left: 24px;
        top: 24px;
      }
    }
  }
</style>
